<!--  -->
<template>
    <div class="zzr_upload_item" :ref="formname" :id="formname" v-loading="loadingInturce" element-loading-text="文件正在上传,请耐心等待，等待期间请勿刷新或关闭页面...">
        <div class="upload_items">
           <div class="item" v-for="(item,index) in fileList" :key="index">
               <div class="item_content">
                   <div class="item_img">
                       <template v-if="matchFileType(item.url) =='image'">
                           <el-image class="i_r_img" :src="item.url" fit="contain" lazy></el-image>
                       </template>
                       <template v-else>
                           <img class="i_icon" :src="require(`@/assets/icon/icon_${matchFileType(item.url)}2@2x.png`)" :alt="matchFileType(item.url)">
                           <div class="name">{{item.name}}</div>
                       </template>
                   </div>
                   <span class="item_handles">
                       <span class="item_handle item_handle_view" @click="handlePictureCardPreview(index)"><i class="el-icon-zoom-in"></i></span>
                       <span class="item_handle item_handle_delete" v-if="!viewOnly" @click="handleRemove(index)"><i class="el-icon-delete"></i></span>
                   </span>
               </div>
            </div>
           <el-upload
               class="item"
               :action="uploadUrl"
               :file-list="fileList"
               :on-success="changeFileList"
               :show-file-list="false"
               name="pic"
               :on-progress="onPorgress"
               :limit="limit"
               v-if="!viewOnly && limit>fileList.length"
           >
               <div class="item_content item_upload">
                   <i class="el-icon-plus"></i>
                   <div>{{$t('message.chooseFile')}}</div>
               </div>
           </el-upload>
        </div>
    </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import filetype from '@/utils/fileTypeMatch'
export default {
 //import引入的组件需要注入到对象中才能使用
 name:'zzrNormalUpload',
 components: {},
 props:{
     value:[String,Number],
     list:{
         type:String,
         default:''
     },
     fileCode:{
         type:[String,Number],
         default:'0'
     },
     imgUrl:String,
     limit:[String,Number],
     viewOnly:{
         type:Boolean,
         default:false
     },
 },
 data() {
   //这里存放数据
   return {
       propValue:'',
       loadingInturce:false,
       uploadUrl:process.env.NODE_ENV=='development'?'/api/common/savePics':this.uploadUrl,
       fileList:[],
       isupload:false
   };
 },
 //监听属性 类似于data概念
 computed: {
     formname(){
         return (((1+Math.random())*0x10000)|0).toString(16).substring(1);
     }
 },
 //监控data中的数据变化
 watch: {
     fileList(val){
         if(!this.viewOnly){
           let newval = '';
        //    console.info(3);
        //    console.info(val);
           val.forEach((idt,idx)=>{
               if(idx==0){
                   newval =  idt.picname
               }else{
                   newval+= ','+idt.picname
               }
           });
        //    console.info(4);
        //    console.info(newval);
           this.$emit('input',newval)
         }
     },
     value(val){
        // console.info(1);
        // console.info(val);
        if(typeof(val)!='undefined'){
        this.getPropValue(val)
        }
     }
 },
 //方法集合
 methods: {
     onPorgress(event, file, fileList) {
       this.loadingInturce = true
     },
     changeFileList(response, file, fileList){
         this.loadingInturce = false;
         if(response.code==0){
           let data = response.zzrresult.pic[0];
           this.fileList.push({
               name:data.filename,
               picname:data.picname,
               url:data.webpath
           })
           this.isupload=true;
        //    console.info(5);
        //    console.info(this.fileList);
         }
     },
     getPropValue(val){
       if(val!=''){
           let fileList = val.split(',');
           let newArr= [];
           fileList.forEach(idt=>{
               
               if(idt.indexOf('http')>-1){
                   newArr.push({picname:idt,url:idt})
               }else{
                   newArr.push({picname:idt,url:this.imgUrl+idt})
               }
           });
        //    console.info(2);
        //    console.info(newArr);
        //    console.info(this.isupload);
           if(!this.isupload){
               this.fileList = newArr
           }
       }else{
           this.fileList = []
       }
     },
     matchFileType(filename){
         return filetype.fileTypeMatch(filename);
     },
     handleRemove(index){
       let that = this;
       that.$confirm(that.$t('message.delateThisConfirm'), that.$t('message.tips'), {
           type: 'info',
           callback: action => {
               if (action === 'confirm') {
                   that.fileList.splice(index,1)
               }
           }
       })
     },
     handlePictureCardPreview(index){
       window.open(this.fileList[index].url)
     },
 },
 //生命周期 - 创建完成（可以访问当前this实例）
 created() {
   this.propValue = this.value;
 },
 //生命周期 - 挂载完成（可以访问DOM元素）
 mounted() {},
 beforeCreate() {}, //生命周期 - 创建之前
 beforeMount() {}, //生命周期 - 挂载之前
 beforeUpdate() {}, //生命周期 - 更新之前
 updated() {}, //生命周期 - 更新之后
 beforeDestroy() {}, //生命周期 - 销毁之前
 destroyed() {}, //生命周期 - 销毁完成
 activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='stylus' scoped>

//@import url(); 引入公共css类
.zzr_upload_item
   position relative
   .upload_items
       display flex
       flex-wrap wrap
       .item
           position relative
           .item_content
               width 110px
               height 110px
               margin 5px
               position relative
               overflow hidden
               border-radius 4px
               border 1px dashed $gray
               .item_img
                   width 100%
                   height 100%
                   box-sizing border-box
                   position relative
                   .i_r_img
                       width 100%
                       height 100%
                   .i_icon
                       width 50px
                       height 50px
                       margin 10px auto 5px
                       display block
                   .name
                       font-size $miniSize
                       text-align center
                       padding 0 5px
                       display -webkit-box
                       -webkit-box-orient vertical
                       -webkit-line-clamp 2
                       height 40px
                       line-height 20px
                       overflow hidden
                       text-overflow ellipsis
                       word-break break-all
               .item_handles
                   position absolute
                   width 100%
                   height 100%
                   left 0
                   top 0
                   cursor pointer
                   text-align center
                   color #fff
                   background-color rgba(0,0,0,.5)
                   opacity 0
                   transition all .3s ease-in-out
                   .item_handle
                       &::after
                           display inline-block
                           content ''
                           height 100%
                           vertical-align middle
                       &>[class*='el-icon']
                           font-size 20px
                           margin 5px
           &:hover .item_handles
               opacity 1
           .item_upload
               background $shallowGray
               display flex
               justify-content center
               flex-direction column
               color $gray
               i 
                   font-size 20px
               &:hover
                   border-color $colorBle
                   color $colorBle
</style>